<script setup lang="ts">
import {router} from "../../main.ts";
import {onMounted, ref} from "vue";
import myAxios from "../../plugins/myAxios.ts";


const onClickLeft = () => {
  router.push('/user')
}

interface Item {
  // interface 改成 type 也行
  id: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: '/post/get',
    query: {
      id: item.id
    }
  })
}

onMounted(() => {
  myAxios.get('/post/favour/post')
   .then(res => {
      list.value = res.data.data;
    })
   .catch(err => {
      console.log(err);
    });
})

const list = ref<{
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
  userId: number;
  createTime: string;
  updateTime: string;
}[]>([]); // 使用 ref 创建响应式变量

</script>

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar class="nav-bar"
               title="我的收藏"
  ></van-nav-bar>

  <img src="../../assets/最终返回键.png" class="back-btn" @click="onClickLeft" alt="">

  <img src="../../assets/最终刷新图片2.png" class="haha" alt="加载中" />
  <img src="../../assets/动图1.gif" class="haha" style="left:5%;" alt="加载中" />

  <div class="container">

        <van-card
            class="show-card"
            v-for="item in list"
            :title="item.title"
            :desc="item.content"
            @click="postDetails(item)"
        />
  </div>








</template>

<style scoped>
.show-card {
  margin-top: 10px;
  width: 90%;
  height: 100px;
  margin-left: 5%;
  border-radius: 10px;
  top: 8%;
}

.haha {
  /*在各种手机的中间显示*/
  top: 5%;
  left: 70%;
  /*设置宽高*/
  width: 100px;
  height: 100px;
  /*设置居中*/
  position: absolute;
  margin: auto;

}


.back-btn {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}
.container {
  position: relative;
  margin-top: 46px;
  padding: 10px;
  height: calc(100vh - 46px);
  overflow-y: auto;
}
</style>